/*
    可以解决多组件共享状态的问题
        以前的解决方式
            a. 将数据与操作数据的行为都定义在父组件
            b. 将数据以及操作数据的行为传递给需要的各个子组件（有可能需要多级传递）


    每个Vuex应用的核心就是store(仓库)，store基本上就是一个容器，它包含应用中大部分的状态。
    Vuex和单纯的全局对象有以下两点不同：
        1. Vuex的状态存储是响应式的
        2. 不能直接改变store中的状态，改变store中状态的唯一途经是提交（commit）mutation


    为了在Vue组件中访问this.$store属性，Vuex提供了以store选项来注入
        new Vue({
          el: '#app',
          store: store,
        })

        methods: {
          increment() {
            this.$store.commit('increment')
            console.log(this.$store.state.count)
          }
        }


*/


import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  // 提供一个初始的state对象
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})


store.state.count // 通过store.state来获取状态对象
store.commit('increment') // 通过store.commit方法触发状态变更